html {
  --border-color: #eee;
  --font-sans: theme('fontFamily.sans');
  --theme-color: var(--auto-theme-color, theme('colors.accent'));
  --hover-color: var(--auto-hover-color, theme('colors.accent/80'));
  --header-height: auto;
  /* Accent color for form controls */
  accent-color: var(--theme-color);

  /* make app like native app in mobile */
  -webkit-tap-highlight-color: transparent;
  /*  for firefox */
  scrollbar-color: var(--theme-color) transparent;
  scrollbar-width: thin;

  font-family: var(--font-sans);
}

a,
details summary {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

:root {
  --bg-opacity: rgba(255, 255, 255, 0.72);
}

[data-theme='dark'] {
  --bg-opacity: rgba(29, 29, 31, 0.72);
}

::selection {
  background-color: var(--theme-color) !important;
  color: theme(colors.white) !important;
  text-shadow: none;
}

::view-transition-new(root) {
  animation: turnOff 800ms ease-in-out;
}
::view-transition-old(root) {
  animation: none;
}

@keyframes turnOn {
  0% {
    clip-path: polygon(0% 0%, 100% 0, 100% 0, 0 0);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0, 100% 100%, 0 100%);
  }
}

[data-theme='dark']::view-transition-new(root) {
  animation: turnOn 800ms ease-in-out;
}
::view-transition-old(root) {
  animation: none;
}

@keyframes turnOff {
  0% {
    clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
  }
  100% {
    clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0);
  }
}
